<template>
  <div class="home">
    <div class="navTop">
      <div class="textLeft">
        <div class="zn-name">
          {{ time }}
          <span class="en-name">July</span>
        </div>
        <div class="condole">炎炎夏日, &nbsp;星朋友陪你。</div>
      </div>
      <div class="textRight">
        {{ name }}
      </div>
    </div>
    <div class="slideShow">
      <slide-show :images="imagesArr"></slide-show>
    </div>
    <div class="selector">
      <div class="selectorLeft">
        <div class="content">
          <div class="selectorText">Lucking派送</div>
          <div class="selectorRemark">30分钟必达</div>
        </div>
      </div>
      <div class="selectorRight">
        <div class="content">
          <div class="selectorText">到店自取</div>
          <div class="selectorRemark">快速取餐不排队</div>
        </div>
      </div>
    </div>
    <div class="applyFor">
      <div class="applyForLeft">
        <div class="bigText">企业账户</div>
        <div class="smallText">创造Office新潮流</div>
      </div>
      <div class="applyForRight">
        申请立享7.5折
        <span class="applyIcon">
          <img src="../assets/images/right.png" class="auto-img" />
        </span>
      </div>
    </div>
    <div class="hot">热门推荐</div>
    <!-- 导入底部列表组件 -->
    <div class="hotList">
      <div class="box">
        <div class="item" v-for="(item, index) in hotArr" :key="index">
          <hot-list :typeArr="item"></hot-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import slideShow from "../components/SlideShow.vue";
import hotList from "../components/HomeItem.vue";
export default {
  name: "Home",
  data() {
    return {
      time: "",
      // 轮播图的数组
      imagesArr: [
        {
          title: "第一张",
          swipeImag: require("../assets/images/4.png"),
        },
        {
          title: "第二张",
          swipeImag: require("../assets/images/5.png"),
        },
        {
          title: "第三张",
          swipeImag: require("../assets/images/6.png"),
        },
      ],
      // 热门商品类型的数组
      hotArr: [],
      name: "",
    };
  },
  components: {
    slideShow,
    hotList,
  },
  methods: {
    // 获取热门的类型
    getDataList() {
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key: "isHot",
          value: 1,
        },
      })
        .then((res) => {
          if (res.data.code === 500) {
            res.data.result.forEach((item) => {
              if (item.enname.indexOf("&") != -1) {
                let str = "";
                str = item.enname.split("&");
                item.enname = str[0];
              }
            });
            this.hotArr = res.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取账户信息
    getInfo() {
      this.axios({
        method: "get",
        url: "/findAccountInfo",
      })
        .then((res) => {
          if (res.data.code == "B001") {
            this.name = "您好," + res.data.result[0].nickName;
          } else {
            this.name = "您好,未登录";
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取商品条目
    getCount(){
        this.axios({
      method: "get",
      url: "/shopcartRows",
    })
      .then((res) => {
        if (res.data.code === 8000) {
          this.typeAllCount = res.data.result;
          this.$store.commit("setCount", res.data.result);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    }
  },
  created() {
    // 获取时间
    let time = new Date().getDate();
    this.time = time;
    this.getInfo();
    this.getDataList();
    this.getCount();
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  margin: 0px auto;
  position: fixed;
  top: 0px;
  bottom: 50px;
  box-sizing: border-box;
  padding: 0px 11px;
  overflow-y: auto;
  .navTop {
    display: flex;
    margin-top: 20px;
    align-items: center;
    .textLeft {
      .zn-name {
        font-size: 25px;
        font-weight: bold;
        .en-name {
          font-size: 13px;
          color: #b1aeae;
        }
      }
      .condole {
        font-size: 14px;
        font-weight: bold;
        margin-top: 5px;
      }
    }
    .textRight {
      margin-left: auto;
      height: 20px;
      text-align: center;
      font-size: 13px;
      line-height: 20px;
      font-weight: bold;
      width: 80px;
    }
  }
  .slideShow {
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
    box-shadow: 0px 2px 8px rgb(112, 110, 110);
  }
  .selector {
    display: flex;
    height: 100px;
    margin-top: 20px;
    .selectorLeft {
      flex: 1;
      border-radius: 10px;
      box-shadow: 0px 2px 8px rgb(204, 200, 200);
      margin-right: 15px;
      background-color: #fff;
      background-image: url(../assets/images/sm.png);
      background-size: 80px;
      background-position: 80px 30px;
      background-repeat: no-repeat;
      .content {
        margin-top: 5px;
        margin-left: 10px;
        .selectorText {
          font-size: 16px;
          font-weight: bold;
        }
        .selectorRemark {
          color: #6c6c6c;
          font-weight: bold;
          margin-top: 5px;
        }
      }
    }
    .selectorRight {
      flex: 1;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 2px 8px rgb(204, 200, 200);
      background-image: url(../assets/images/bg.png);
      background-size: 80px;
      background-position: 80px 50px;
      background-repeat: no-repeat;
      .content {
        margin-top: 5px;
        margin-left: 10px;
        .selectorText {
          font-size: 16px;
          font-weight: bold;
        }
        .selectorRemark {
          color: #6c6c6c;
          font-weight: bold;
          margin-top: 5px;
        }
      }
    }
  }
  .applyFor {
    height: 80px;
    background-color: #fff;
    margin-top: 20px;
    display: flex;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    align-items: center;
    box-shadow: 0px 2px 8px rgb(204, 200, 200);
  }
  .applyForLeft {
    .bigText {
      font-size: 16px;
      font-weight: bold;
    }
    .smallText {
      color: #6c6c6c;
      font-weight: bold;
      margin-top: 5px;
    }
  }
  .applyForRight {
    margin-left: auto;
    font-size: 14px;
    display: flex;
    font-weight: bold;
    .applyIcon {
      display: block;
      height: 20px;
      width: 20px;
      margin-left: 2px;
    }
  }
  .hot {
    font-size: 20px;
    margin-top: 20px;
    font-weight: bold;
  }
  .hotList {
    height: 120px;
    width: 100%;
    margin-top: 15px;
    overflow: hidden;
    .box {
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      position: relative;
      .item {
        display: inline-block;
        margin-left: 15px;
        &:first-child {
          margin-left: 0px;
        }
      }
    }
  }
}
</style>
